import {createRouter , createWebHashHistory} from "vue-router";

import $axios from '@/utils/request';

import { ElMessage } from "element-plus";
// 定义路由表

// 1.后台账号可以访问前后台所有页面  2.前台账号只能访问前台网页

// 给路由设置两个属性：
// requireAuth属性：控制后台账号的访问权限（true：当前账号有权限访问这些路由；false：当前账号没有权限访问这些路由)
// isCheckLogin属性：主要针对前台网易（true：这些路由必须登录账号才能访问；false：那些路由不登录也能访问）
const routes = [
    {
        path:'/',
        redirect:'/admin'    //当直接访问官网或本地域名时默认重定向到前台首页
    },
    // 前台网站
    {
        path:'/home',
        mate:{requireAuth:false},  //前台商城所有页面捷克用任何账号访问
        // 子路由
        children:[
            //设置子路由首页组件的访问地址为空,相当于当访问/home的时候，也会默认访问到该组件页面
            {
                path:'',
                name:'HomeIndex',
                component:()=>import('@/views/home/HomeIndex.vue'),
                meta:{title:'在线商城首页',isCheckLogin:false}
            },
            {
                path:'login',
                name:'HomeLogin',
                component:()=>import('@/views/home/HomeLogin.vue'),
                meta:{title:'会员登录',isCheckLogin:false}
            },
            {
                path:'cart',
                name:'HomeCart',
                component:()=>import('@/views/home/HomeCart.vue'),
                meta:{title:'会员购物车',isCheckLogin:true}
            },

        ]
    },
    // 后台管理系统
    {
        path:'/admin',
        children:[
            // 设置空路由给登录组件
            {
                path:'',
                name:'AdminLogin',
                component:()=>import('@/views/admin/AdminLogin.vue'),
                meta:{title:'后台系统登录页',requireAuth:false}
            },
            {
                path:'index',
                name:'AdminIndex',
                component:()=>import('@/views/admin/AdminIndex.vue'),
                meta:{title:'后台首页',requireAuth:false},
                children:[
                    {
                        path:'user',
                        name:'AdminUserListCom',
                        component:()=>import('@/components/admin/user/AdminUserListCom.vue'),
                        meta:{title:'用户管理',requireAuth:false}
                    },
                    {
                        path:'goods',
                        name:'AdminGoodsList',
                        component:()=>import('@/components/admin/goods/AdminGoodsList.vue'),
                        meta:{title:'商品管理',requireAuth:false},
                    },
                    {
                        path:'goods/add',
                        name:'AdminGoodsAdd',
                        component:()=>import('@/components/admin/goods/AdminGoodsAdd.vue'),
                        meta:{title:'商品添加',requireAuth:false},
                    },
                    {
                        path:'goods/amend/:id',
                        name:'AdminGoodsAmend',
                        component:()=>import('@/components/admin/goods/AdminGoodsAmend.vue'),
                        meta:{title:'商品修改',requireAuth:false},
                    },
                    {
                        path:'order',
                        name:'AdminOrderList',
                        component:()=>import('@/components/admin/order/AdminOrderList.vue'),
                        meta:{title:'订单管理',requireAuth:false},
                    },
                    {
                        path: 'banner',
                        name: 'BannerList',
                        component: () => import('@/components/admin/banner/BannerList.vue'),
                        meta: {
                          title: '轮播图管理',
                          icon: 'Picture'
                        }
                      },
                ]
            },
            
        ]
    }
];

// 定义路由器/创建路由器
const router = createRouter({
    // 调用路由表，实现router-link的跳转以及router-view的渲染
    // routes ： routes
    routes,

    // 将路由历史模式设置为hash模式（哈希历史）
    history : createWebHashHistory(),
});
// 设置全局前置路由守卫（能获取登录者的身份===>isCheckLogin:true/requireAuth:true;没有获取到登录者的身份===>isCheckLogin:false
router.beforeEach((to,from,next)=>{
    // 接受身份数据
    let role;
    // 判断即将前往的目录路由是否需要验证访问权限，如果需要验证则发起角色访问请求；如果不需要，只需要判断是否需要登录前台账号
    if(to.meta.requireAuth === true){
        // 需要验证当前使用者的访问权限
        // 向后端发起请求当前使用者角色的数据
        $axios.post('/role').then((res)=>{
            // 判断状态是否为200===>请求成功
            if(res.code==='200'){
                // 获取到使用者身份
                role= res.data

                // 判断当前身份是否是“admin后台管理员”，如果是则说明已登录后台账号且能访问后台首页
                switch(role){
                    case'admin':
                    // 有足够的权限访问后台首页
                    next()
                    break;

                    case 'user':
                    // 权限不足
                    ElMessage({message:'您的权限不足，请前往商城登录，祝您购物愉快！',duration:5000,type:'error'})
                    next('/home/login')
                    break;
                }
            }else{
                // 没有获取到身份
                ElMessage.error('您还不是我们的会员，请注册')
                next('/home/login')
            }
        }).catch((err)=>console.log(err))
    }else{
        // 不需要权限限制，只需要是个账号就能访问到商城
        // 只需要做一个判断当前路由是否需要登录后才能访问
        if(to.meta.isCheckLogin===true){
            // 会员
            let user = sessionStorage.getItem('user')
            if(!user){
                next('/home/login')
            }else{
                next();
            }
        }else{
            next();
        }
    }
 })
// 导出路由器
export default router;